<template>
  <button
    class="button-cell"
    :open-type="openType"
    plain
    :class="[customClass, sizeClass]"
    :style="{fontSize:fontSize}"
    @tap="onClick"
  >
    <van-icon
      :name="icon"
      class="button-cell__left-icon-wrap"
    />
    <view class="button-cell__title">{{title}}</view>
    <view class="button-cell__value">{{value}}</view>
    <van-icon
      :name="rightIcon"
      class="button-cell__right-icon-wrap"
    />
  </button>
</template>

<script>
export default {
  name: 'ButtonCell',
  props: {
    openType: String,
    title: String,
    value: String,
    border: {
      type: Boolean,
      default: true
    },
    icon: String,
    size: {
      type: String,
      default: 'medium'
    },
    customClass: String,
    rightIcon: {
      type: String,
      default: 'arrow'
    },
    url: {
      type: String,
      default: ''
    },
    linkType: {
      type: String,
      default: 'navigateTo'
    },
    background: String,
    iconWidth: [Number, String],
    iconHeight: [Number, String]
  },
  computed: {
    fontSize () {
      let sizes = {
        small: '10px',
        medium: '12px',
        large: '14px'
      }
      return sizes[this.size]
    },
    sizeClass () {
      return 'button-cell--' + this.size
    }
  },
  methods: {
    addUnit (value) {
      if (value) {
        return /^\d+(\.\d+)?$/.test(value) ? value + 'px' : value
      }
      return undefined
    },
    onClick () {
      if (this.url) {
        this.jumpLink()
      } else {
        this.$emit('click')
      }
    },
    jumpLink () {
      const url = this.url
      if (url) {
        if (
          this.linkType === 'navigateTo' &&
          // eslint-disable-next-line no-undef
          getCurrentPages().length > 9
        ) {
          wx.redirectTo({ url })
        } else {
          wx[this.linkType]({ url })
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.button-cell {
  border: none;
  border-radius: 0;
  //
  position: relative;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 24px;
  color: #323233;
  background-color: #fff;
  &::after {
    -webkit-transform-origin: center;
    transform-origin: center;
    pointer-events: none;
    top: auto;
    right: 0;
    bottom: 0;
    left: 16px;
    border-bottom: 1px solid #ebedf0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    height: auto;
    border-radius: 0;
  }
  &--borderless:after {
    display: none;
  }
  &:last-child {
    margin: 0;
  }

  &__title,
  &__value {
    flex: 1;
    display: flex;
    &:empty {
      display: none;
    }
  }
  &__label {
    margin-top: 3px;
    font-size: 12px;
    line-height: 18px;
    color: #969799;
  }
  &__value {
    overflow: hidden;
    text-align: right;
    vertical-align: middle;
    color: #969799;
  }
  &__left-icon-wrap,
  &__right-icon-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: 24px;
    font-size: 16px;
  }
  &__left-icon-wrap {
    margin-right: 5px;
  }
  &__right-icon-wrap {
    margin-left: 5px;
    color: #969799;
  }
  &__left-icon {
    vertical-align: middle;
  }
  &__left-icon,
  &__right-icon {
    line-height: 24px;
  }
  &--center {
    -webkit-align-items: center;
    align-items: center;
  }
  &--large {
    padding-top: 12px;
    padding-bottom: 12px;
    .button-cell__title,
    .button-cell__value {
      font-size: 16px;
    }
    .button-cell__label {
      font-size: 14px;
      font-size: var(--cell-large-label-font-size, 14px);
    }
  }
  &.button-hover {
    background-color: #f2f3f5;
  }
}
</style>
